<template>
  <view class="inputBox">
    <view class="inp">
      <input
        type="text"
        placeholder="请输入商品名称"
        @confirm="this.$emit('search', value)"
      />
    </view>
    <view class="btn">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style lang="less" scoped>
.inputBox {
  position: relative;
  height: 100rpx;
  z-index: 4;
  display: flex;
  align-items: center;
  padding: 0 20rpx 0 40rpx;
  background: #fff;

  .inp {
    flex: 1;
    margin-right: 18rpx;

    input {
      padding: 0 28rpx;
      height: 64rpx;
      border-radius: 32px;
      background: #f2f2f2;
      box-sizing: border-box;
      font-size: 30rpx;
    }
  }
}
</style>
